<template>
	<view class="content">
     <view class="user-max-box">
          <view class="user-header-box">
            <view class="user-h-box">
                  <image class="user-img" src="/static/logo.png" /> 
                  <iconArrow :point="1" :color="'#fff'" />
                  <view class="user-name">张三</view>
                  <view class="user-tel">159****2332</view>
            </view>
            <view class="user-box">
                <view class="item">
                    <view class="number">56</view>
                    <view class="title">看过</view>
                    <view class="line"></view>
                </view>
                <view class="item">
                    <view class="number"><text class="unit">￥</text> 56</view>
                    <view class="title">为我省下</view>
                    <view class="line"></view>
                </view>
                 <view class="item">
                    <view class="number">56</view>
                    <view class="title">我的卡券</view>
                </view>
            </view>
           
          </view>
          <view class="bottom-line-huxing-box">
                
                <view class="bottom-line-huxing"></view>
                <view class="bottom-line-huxing-bg">
                  <view class="bottom-line-leftbg"></view>
                  <view class="bottom-line-rightbg"></view>
                </view>
          </view>
           <view class="bottom-box-user-info">
             <view class="max-info-box">
                <image class="y-name" src="/static/user/y-name.png" />
                <view class="y-time">会员到期时间:2019.4.12</view>
              </view>
              <view class="info-img">
                   <view class="item"><image class="i-name" src="/static/user/1.png" /></view>  
                   <view class="item"><image class="i-name" src="/static/user/2.png" /></view>  
                   <view class="item"><image class="i-name" src="/static/user/3.png" /></view>  
                   <view class="item"><image class="i-name" src="/static/user/4.png" /></view>  
                </view>
           </view>
     </view>
     <view class="user-list-box">
         <view class="title">我的  <image class="tip-img" src="/static/user/5.png" /> </view>
         <view class="user-next-box">
             <view class="item" @click="goPage('/pages/user/equity')">
               <image class="tip-img" src="/static/user/7.png" />
                <view class="name">权益</view> 
             </view>
              <view class="item">
                <image class="tip-img" src="/static/user/8.png" />
                <view class="name">订单</view>
             </view>
              <view class="item" @click="goPage('/pages/user/bankCard')">
                <image class="tip-img" src="/static/user/9.png" />
                <view class="name">银行卡</view>
             </view>
              <view class="item" @click="goPage('/pages/user/coupon')">
                <image class="tip-img" src="/static/user/10.png" />
                <view class="name">优惠券</view>
             </view>
         </view>
     </view>
    <view class="user-list-box">
         <view class="title">服务  <image class="tip-img-server" src="/static/user/6.png" /> </view>
         <view class="user-next-box">
             <view class="item">
               <image class="tip-img" src="/static/user/11.png" />
                <view class="name">个人资料</view>
             </view>
              <view class="item">
                <image class="tip-img" src="/static/user/12.png" />
                <view class="name">兑换卡券</view>
             </view>
              <view class="item">
                <image class="tip-img" src="/static/user/13.png" />
                <view class="name">常见问题</view>
             </view>
              <view class="item">
                <image class="tip-img" src="/static/user/14.png" />
                <view class="name">客户服务</view>
             </view>
         </view>
     </view>
     	<footerMenu />
	</view>
</template>

<script>
import iconArrow from '../components/icon-arrow';
import footerMenu from '../components/footer';
	export default {
  components: {
    iconArrow,
    footerMenu
  },
		data() {
			return {
			}
		},    
		onLoad() 
		{
      var self = this;
					self.$api.ajax({
						  data:{
							},
		        	url:'member/member/info/',
		        	method:'get',
		        	success:function(data){
								console.log(data);
		        	}
		      })
		},
		watch:{
		},
		methods: {
      goPage(url){
        this.$api.goPage(url);
      }
		}
	}
</script>

<style  lang="scss" scoped>

	.content {
		 -webkit-overflow-scrolling: touch;
		 background-color: #f5f5f5;
     padding-bottom: px2vw(100);
	}
  .user-max-box{
     position: relative;
      .bottom-box-user-info::after{
          width: px2vw(310);
          height: px2vw(10);
          background-color: #000;
          content: '';
          position: absolute;
          top:- px2vw(10);
          opacity: 0.35;
          left: 50%;
          margin-left: - px2vw(155);
          border-top-left-radius: px2vw(18);
          border-top-right-radius: px2vw(18);
      }
      .bottom-box-user-info{
          height: px2vw(80);
          width: px2vw(335);
          background-color: #333;
          position: absolute;
          bottom:px2vw(10);
          border-top-left-radius: px2vw(15);
           border-top-right-radius: px2vw(15);
           border-bottom-right-radius: px2vw(20);
           border-bottom-right-radius: px2vw(20);
          left: 50%;
          margin-left: - px2vw(167.5);
          z-index: 999;
          .max-info-box{
              height: px2vw(80);
              width: px2vw(300);
              position: relative;
              margin: 0 auto;
              padding: px2vw(24.5) 0;
              text-align: left;
              .y-name{
                  height: px2vw(20);
                  width: px2vw(99);
              }
              .y-time{
                padding-top: px2vw(1);
                color: #EFDBBF;
                font-size: px2vw($fz12);
                font-style:oblique;
              }
          }
          .info-img{
                display: flex;
                position: absolute;
                height: px2vw(35);
                top: 50%;
                margin-top:- px2vw(17.5);
                right: px2vw(0);
                .item{
                  height: px2vw(35);
                  text-align: center;
                  line-height: px2vw(35);
                  width: px2vw(35);
                  border-radius: px2vw(35);
                  background-color: #5f5f5f;
                  position: relative;
                  margin-right: px2vw(10);
                  .i-name{
                    height: px2vw(20);
                    width: px2vw(20);
                    top: 50%;
                    margin-top:- px2vw(10);
                    left: 50%;
                    margin-left:- px2vw(10);
                    position: absolute;
                  }
                }
              }
        }
    .user-header-box{
        height: px2vw(250);
        width: px2vw(375);
        background: linear-gradient(to bottom, #FA9529 0%,#F24244 100%);
        position: relative;
        .user-h-box{
             height: px2vw(100);
             position: relative;
             text-align: left;
             padding-left: px2vw(100);
             color: #fff;
              .user-img{
                  height: px2vw(72);
                  width: px2vw(72);
                  border-radius: px2vw(72);
                  position: absolute;
                  left: px2vw(13);
                  top: 50%;
                  margin-top:- px2vw(36);
            }
            .user-name{
               font-size: px2vw($fz18);
               padding-top:px2vw(25);
               font-weight: 600;
            }
            .user-tel{
               font-size: px2vw($fz14);
               padding-top:px2vw(5);
            }
        }
        .user-box{
          display: flex;
          position: relative;
          height: px2vw(70);
           .item{
              width: 33.3%;
              height: px2vw(70);
              text-align: center;
              padding-top: px2vw(15);
              position: relative;
              .line{
                position: absolute;
                height: px2vw(20);
                border-right: px2vw(1) solid #eee;
                right: 0;
                width: px2vw(2);
                top: 50%;
                margin-top:- px2vw(10);
              }
             .number{
               font-size: px2vw($fz24);
               font-weight: 600;
               color: #fff;
               .unit{
                font-size: px2vw($fz12);
                color: #fff;
                padding-right: px2vw(2);
               }
             }
              .title{
               font-size: px2vw($fz12);
               color: #fff;
               padding-top: px2vw(10);
             }
           }
        }

     }
    .bottom-line-huxing-box{
        position: relative;
        height: px2vw(50);
        width: 100vw;
        overflow: hidden;
        background-color: #f5f5f5;
        .bottom-line-rightbg,
        .bottom-line-leftbg{
          background-color: #F24244;
          position: absolute;
          left: 0;
          top:0;
          height: px2vw(50);
          width: px2vw(20);
          z-index: 919;
        }
        .bottom-line-rightbg{
          right: 0;
          left: auto;
        }
        .user-bottom-box{
          height: px2vw(50);
          width: px2vw(350);
          background-color: #333;
          position: absolute;
          z-index: 9;
          top: 0;
          left: 50%;
          margin-left:- px2vw(175);
          border-radius: px2vw(10);
        }
      .bottom-line-huxing{
          width: px2vw(375);
          height: px2vw(50);
          position: absolute;
          left: 50%;
          margin-left:- px2vw(187.5);
          top:0; 
          z-index: 1;
          border-radius: 0 0 50% 40%;
          background: linear-gradient(to bottom, #F24244 0%,#F24244 100%);
      }
      .bottom-line-huxing-bg{
          width: px2vw(375);
          height: px2vw(50);
          position: absolute;
          left: 50%;
          margin-left:- px2vw(187.5);
          top:0; 
          z-index: 109;
          border-radius: 0 0 50% 40%;
          background: linear-gradient(to bottom, #333 0%,#333 100%);
          overflow: hidden;
      }
    }
  }
  .user-list-box{
    position: relative;
    width: px2vw(346);
    height: px2vw(140);
    margin: px2vw(20) auto;
    border-radius: px2vw(10);
    background-color: #fff;
    border:px2vw(1) solid #eee;
    .title{
      height: px2vw(50);
      line-height: px2vw(50);
      color: #000;
      font-size: px2vw($fz18);
      text-align: left;
      padding: 0 px2vw(18);
      position: relative;
      .tip-img-server,
      .tip-img{
        height: px2vw(18);
        width: px2vw(62);
        left: px2vw(62);
        position: absolute;
        top: 50%;
        margin-top: - px2vw(9);
      }
      .tip-img-server{
         width: px2vw(100);
      }
    }
    .user-next-box{
      display: flex;
      .item{
        width: 25%;
        position: relative;
        height: px2vw(70);
        padding-top: px2vw(10);
        .tip-img{
          height: px2vw(30);
          width: px2vw(30);
          position: absolute;
          left: 50%;
          margin-left:- px2vw(15);
        }
        .name{
          font-size: px2vw($fz14);
          color: #000;
          padding-top: px2vw(40);
          text-align: center;
        }
      }
    }
  }
</style>
